<template>
	<view class="safe-wapper">
		<view class="top-fixed">
			<u-navbar :fixed="false" :titleStyle="{ color: '#FFF' }" leftIconColor="#fff" bgColor="transparent"
				:autoBack="true" title="物资管理分析"></u-navbar>
			<view class="tablist">
				<view class="tab" v-for="(item,index) in  tabList" :key="index" @click="changeTab(index)"
					:class="index===active ? 'active' :''">
					{{item.name}}
					<u-icon name="arrow-up-fill" color="#fff" size="10" v-if="index===active"></u-icon>
				</view>
			</view>
			<view class="top-bg">
				<view class="top-border"></view>
			</view>
			<view class="clearfix"></view>
			<view class="filter-con" v-if="active>0">
				<view class="calendar">
					<u-icon name="arrow-left" color="#323232" size="14" @click="changMonth(-1)"></u-icon>
					<view class="arrow" @click="openShow">
						<text>{{time}}</text>
						<u-icon name="arrow-down-fill" color="#323232" size="14"></u-icon>
					</view>
					<u-icon name="arrow-right" color="#323232" size="14" @click="changMonth(1)"></u-icon>
				</view>
			</view>
			<view class="clearfix"></view>
		</view>
		<view class="chart-content" v-if="isShow">
			<view class="chart-con-three" v-if="active===0" :style="{marginTop:heightEle*2+'rpx'}">
				<view class="chart-con">
					<view class="chart-tit">
						库存数据
					</view>
					<view class="hx-data">
						<view class="item">
							<view class="number">{{kuCunShuLiang}}</view>
							<view class="name">库存数量</view>
						</view>
						<view class="item">
							<view class="number">{{kuCunJinE}}</view>
							<view class="name">库存金额 (万元)</view>
						</view>
						<view class="item">
							<view class="number">{{kuCunYuJingSku}}</view>
							<view class="name">库存预警SKU</view>
						</view>

					</view>

					<view class="h10 bg"></view>
					<view class="chart-tit">
						库存数量分布
					</view>
					<pieCharts v-if="kuCunShuLiangFenBu" :chartData="kuCunShuLiangFenBu" />
					<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
						icon="../../static/image/chart-no-data.png" class="nochartdata"></u-empty>
					<view class="h10 bg"></view>
					<view class="chart-tit">
						库存金额分布(单位：万元)
					</view>
					<pieCharts v-if="kuCunJinEFenBu" :chartData="kuCunJinEFenBu" />
					<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
						icon="../../static/image/chart-no-data.png" class="nochartdata"></u-empty>
					<view class="h10 bg"></view>
					<view class="chart-tit">
						库存金额排行(单位：万元)
					</view>
					<xBarCharts v-if="kuCunJinEPaiHang" :chartData="kuCunJinEPaiHang" />
					<u-empty v-else text="暂无数据" width="320rpx" height="320rpx"
						icon="../../static/image/chart-no-data.png" class="nochartdata"></u-empty>
					<view class="h40"></view>

				</view>
			</view>
			<view class="chart-con" v-if="active===1" :style="{marginTop:heightEle1*2+'rpx'}">
				<view class="two-head">
					<view class="head-title">
						总领用金额(元)
					</view>
					<view class="head-right" v-if="lingYongZongJinE &&lingYongZongJinE.length>0">
						<view class="item" v-for="(item,index) in lingYongZongJinE" :key="index">{{item}}</view>

					</view>
				</view>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					物资领用金额分布(元)
				</view>
				<radarCharts v-if="wuZiLingYongJinEFenBu" :tooltipArr="tooltipArr" :chartData="wuZiLingYongJinEFenBu"
					style="height: 560rpx; " />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					领用物资类目分布
				</view>
				<pieCharts v-if="wuZiLingYongXiangMuFenBu" :chartData="wuZiLingYongXiangMuFenBu" />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					物资领用金额排行(元)
				</view>
				<xBarCharts class="mt20" v-if="wuZiLingYongJinEPaiHang" :chartData="wuZiLingYongJinEPaiHang" />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					各部门物资领用表(元)
				</view>
				<view class="tables">
					<scroll-view scroll-x scroll-y>
						<view class="table" :style="tableStyle">
							<view class="table-header"
								v-if="buMenWuZiLingYongTongJi.name && buMenWuZiLingYongTongJi.name.length>0">
								<view class="title-cell">

								</view>
								<view class="content-cell" v-for="(column ,index) in buMenWuZiLingYongTongJi.name"
									:key="index">
									<view class="cell">{{ column }}</view>
								</view>
							</view>
							<view class="table-content" :style="tableStyle"
								v-if="buMenWuZiLingYongTongJi.tableList && buMenWuZiLingYongTongJi.tableList.length">
								<view class="table-content__item"
									v-for="(item, index) in buMenWuZiLingYongTongJi.tableList" :key="index">
									<view
										:class="subIndex===0?'title-cell':buMenWuZiLingYongTongJi.name.length===1?'content-cell-big':'content-cell'"
										v-for="(subItem,subIndex) in item" :key="subIndex">
										<view class="cell">{{ subItem }}</view>
									</view>
								</view>
								<view class="table-content__item">
									<view class="title-cell">
										<view class="cell">合计</view>
									</view>
									<view class="content-cell"
										:class="buMenWuZiLingYongTongJi.name.length===1?'content-cell-big':''"
										v-for="(item, index) in buMenWuZiLingYongTongJi.sumList" :key="index">
										<view class="cell">{{ item }}</view>
									</view>
								</view>


							</view>
						</view>
					</scroll-view>
					<view class="h40"></view>

				</view>
				<!-- </scroll-view> -->
			</view>

			<view class="chart-con" v-if="active===2" :style="{marginTop:heightEle1 *2+'rpx'}">
				<view class="two-head">
					<view class="head-title">
						总领用金额(元)
					</view>
					<view class="head-right" v-if="lingYongZongJinE &&lingYongZongJinE.length>0">
						<view class="item" v-for="(item,index) in lingYongZongJinE" :key="index">{{item}}</view>

					</view>
				</view>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					物资消耗量变化趋势
				</view>
				<lineCharts v-if="wuZiXianHaoBianHuaQuShi" :chartData="wuZiXianHaoBianHuaQuShi" />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h40"></view>
				<view class="h10 bg"></view>

				<view class="chart-tit">
					物资采购量变化趋势
				</view>
				<lineCharts v-if="wuZiCaiGouBianHuaQuShi" :chartData="wuZiCaiGouBianHuaQuShi" />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h40"></view>
				<view class="h10 bg"></view>
				<view class="chart-tit">
					库存金额变化趋势(元)
				</view>
				<lineCharts v-if="kuCunJinEBianHuaQuShi" :chartData="kuCunJinEBianHuaQuShi" />
				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
					class="nochartdata"></u-empty>
				<view class="h40"></view>
			</view>
		</view>
		<u-datetime-picker :formatter="formatter" v-model="newDate" :maxDate="maxDate" v-if="showDate" :show="showDate"
			mode="year-month" @cancel="showDate=false" @confirm="confirm">
		</u-datetime-picker>

	</view>
</template>

<script>
	import {
		materialManagementStatistics
	} from '@/api/report.js'
	import pieCharts from '../components/pieCharts.vue'
	import xBarCharts from '../components/xBarCharts.vue'
	import radarCharts from '../components/radarCharts.vue'
	import lineCharts from '../components/lineCharts.vue'
	import {
		pieChartData,
		xBarChartData,
		lineChartData,
		formatZero,
		radarChartData
	} from '@/utils/index.js'
	export default {
		components: {
			pieCharts,
			xBarCharts,
			radarCharts,
			lineCharts
		},
		computed: {
			tableStyle() {
				let width = 0
				if (this.buMenWuZiLingYongTongJi.name.length === 1) {
					width = 690
				} else {
					width = this.titleWidth + (this.buMenWuZiLingYongTongJi.name.length) * this.contentWidth;
				}
				return `width: ${width}rpx`;
			},

		},
		data() {
			return {
				tabList: [{
					name: '库存分析'
				}, {
					name: '物资领用分析',
				}, {
					name: '出入库分析',
				}],
				active: 0,
				showDate: false,
				currentDate: '',
				time: '',
				maxDate: '',
				kuCunShuLiang: 0,
				kuCunJinE: 0,
				kuCunYuJingSku: 0,
				kuCunJinEFenBu: null,
				kuCunJinEPaiHang: null,
				kuCunShuLiangFenBu: null,
				wuZiLingYongXiangMuFenBu: null,
				wuZiLingYongJinEPaiHang: null,
				wuZiXianHaoBianHuaQuShi: null,
				wuZiCaiGouBianHuaQuShi: null,
				kuCunJinEBianHuaQuShi: null,
				wuZiLingYongJinEFenBu: null,
				lingYongZongJinE: [],
				newDate: Number(new Date()),
				buMenWuZiLingYongTongJi: {
					name: [],
					tableList: [],
					sumList: []
				},
				titleWidth: 200,
				contentWidth: 250,
				heightEle: 0,
				heightEle1: 0,
				isShow: true,
				tooltipArr: []

			}
		},
		onLoad(option) {
			this.getNowFormatDate()
			this.getList()
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".top-fixed").boundingClientRect(data => {
				console.log(JSON.stringify(data))
				this.heightEle = Math.floor(data.height)
				this.heightEle1 = Math.floor(data.height) + 76
			}).exec()

		},
		methods: {
			changMonth(num) {
				const {
					year,
					month
				} = this.getMonthYear(num)
				let months = month < 10 ? 0 + '' + month : month
				const getTime = year + '-' + months
				if (Number(new Date(getTime)) <= Number(new Date(this.currentDate))) {
					this.time = getTime
					this.getList()
				}
				// const currentYear = this.currentDate.split('-')[0]
				// const currentMonth = Number(this.currentDate.split('-')[1])
				// if (year <= currentYear && month <= currentMonth) {
				// 	let months = month < 10 ? 0 + '' + month : month
				// 	this.time = year + '-' + months
				// 	this.getList()
				// }
			},
			openShow() {
				this.newDate = Number(new Date(this.time))
				this.showDate = true
			},
			cancel() {
				this.newDate = ''
				this.showDate = false
				this.newDate = Number(new Date(this.time))
			},
			getMonthYear(num) {
				let month = Number(this.time.split('-')[1])
				let year = Number(this.time.split('-')[0])
				let year2 = year
				let month2 = month + num
				if (month + num <= 0) {
					// 之前年份
					year2 = year - 1 - parseInt(Math.abs(month2) / 12)
					month2 = 12 - (Math.abs(month2) % 12)
				} else if ((month2 / 12) > 1) {
					// 之后年份
					year2 = year + (month2 % 12 == 0 ? 0 : parseInt(month2 / 12))
					month2 = parseInt(month2 % 12) == 0 ? 12 : parseInt(month2 % 12)
				}
				return {
					year: year2,
					month: month2
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}

				return value;
			},

			getNowFormatDate() {
				let date = new Date(),
					seperator1 = '-', //格式分隔符
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				this.currentDate = year + seperator1 + month
				this.time = this.currentDate
				// + seperator1 + strDate
				this.maxDate = new Date().getTime()
			},
			changeTab(index) {
				if (index !== this.active) {
					this.isShow = false
					this.active = index
					this.getList()
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 0
					})
					setTimeout(() => {
						this.isShow = true

					}, 10)
				}
			},
			confirm(e) {
				console.log('confirm', e)
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm');
				this.time = timeValue;
				this.showDate = false
				this.getList()
			},
			sumArray(array) {
				const newArray = [];
				array.forEach(sub => {
					sub.forEach((num, index) => {
						if (newArray[index]) {
							newArray[index] += Number(num);
						} else {
							newArray[index] = Number(num);
						}
					});
				});
				return newArray;
			},

			getList() {

				uni.showLoading({
					title: '加载中'
				})
				const params = {
					type: 2,
					time: this.time
				}
				this.buMenWuZiLingYongTongJi = {
					name: [],
					tableList: [],
					sumList: []
				}
				materialManagementStatistics(params).then(res => {
					const {
						kuCunShuLiang,
						kuCunJinE,
						kuCunYuJingSku,
						kuCunShuLiangFenBu,
						kuCunJinEFenBu,
						kuCunJinEPaiHang,
						wuZiLingYongXiangMuFenBu,
						wuZiLingYongJinEPaiHang,
						lingYongZongJinE,
						wuZiXianHaoBianHuaQuShi,
						wuZiCaiGouBianHuaQuShi,
						kuCunJinEBianHuaQuShi,
						wuZiLingYongJinEFenBu,
						buMenWuZiLingYongTongJi
					} = res.data
					this.kuCunShuLiang = kuCunShuLiang
					this.kuCunJinE = kuCunJinE
					this.kuCunYuJingSku = kuCunYuJingSku

					if (this.getNumber(kuCunShuLiangFenBu) === kuCunShuLiangFenBu.length) {
						this.kuCunShuLiangFenBu = null
					} else {
						this.kuCunShuLiangFenBu = kuCunShuLiangFenBu.length > 0 ? pieChartData(
							kuCunShuLiangFenBu) :
							null
					}
					if (this.getNumber(kuCunJinEFenBu) === kuCunJinEFenBu.length) {
						this.kuCunJinEFenBu = null
					} else {
						this.kuCunJinEFenBu = kuCunJinEFenBu.length > 0 ? pieChartData(kuCunJinEFenBu) : null
					}
					this.kuCunJinEPaiHang = kuCunJinEPaiHang.length > 0 ? xBarChartData(kuCunJinEPaiHang) : null

					// let moreValue = []
					// if (wuZiLingYongXiangMuFenBu.length > 0) {
					// 	moreValue = wuZiLingYongXiangMuFenBu.filter((item) => {
					// 		return Number(item.value) === 0;
					// 	});
					// }
					if (this.getNumber(wuZiLingYongXiangMuFenBu) === wuZiLingYongXiangMuFenBu.length) {
						this.wuZiLingYongXiangMuFenBu = null
					} else {
						this.wuZiLingYongXiangMuFenBu = wuZiLingYongXiangMuFenBu.length > 0 ? pieChartData(
							wuZiLingYongXiangMuFenBu) : null
					}
					this.wuZiLingYongJinEPaiHang = wuZiLingYongJinEPaiHang.length > 0 ? xBarChartData(
						wuZiLingYongJinEPaiHang) : null
					const str = formatZero(lingYongZongJinE, 6)
					this.lingYongZongJinE = str.toString().split('')
					this.wuZiXianHaoBianHuaQuShi = wuZiXianHaoBianHuaQuShi.length > 0 ? lineChartData(
						wuZiXianHaoBianHuaQuShi) : null
					this.wuZiCaiGouBianHuaQuShi = wuZiCaiGouBianHuaQuShi.length > 0 ? lineChartData(
						wuZiCaiGouBianHuaQuShi) : null
					this.kuCunJinEBianHuaQuShi = kuCunJinEBianHuaQuShi.length > 0 ? lineChartData(
						kuCunJinEBianHuaQuShi) : null
					this.tooltipArr = []
					if (wuZiLingYongJinEFenBu.length > 0) {
						let tooltipArr = []
						for (let i = 0; i < wuZiLingYongJinEFenBu.length; i++) {
							const obj = {
								text: `${wuZiLingYongJinEFenBu[i].name}: ${wuZiLingYongJinEFenBu[i].value} 元`,
								color: '#1990FF'
							}
							tooltipArr.push(obj)
						}
						this.tooltipArr = [tooltipArr]
					} else {
						this.tooltipArr = []
					}
					console.log(this.tooltipArr, 'tooltipArr')
					this.wuZiLingYongJinEFenBu = wuZiLingYongJinEFenBu.length > 0 ? radarChartData(
						wuZiLingYongJinEFenBu) : null

					if (buMenWuZiLingYongTongJi && buMenWuZiLingYongTongJi.length > 0) {
						for (let b = 0; b < buMenWuZiLingYongTongJi[0].values.length; b++) {
							this.buMenWuZiLingYongTongJi.tableList.push([buMenWuZiLingYongTongJi[0].values[b]
								.name
							])
						}
						for (let i = 0; i < buMenWuZiLingYongTongJi.length; i++) {
							this.buMenWuZiLingYongTongJi.name.push(buMenWuZiLingYongTongJi[i].name)
							for (let j = 0; j < buMenWuZiLingYongTongJi[i].values.length; j++) {
								this.buMenWuZiLingYongTongJi.tableList[j].push(buMenWuZiLingYongTongJi[i].values[j]
									.value)
							}

						}
						let newArr = []

						for (let z = 0; z < this.buMenWuZiLingYongTongJi.tableList.length; z++) {
							const sumItem = this.buMenWuZiLingYongTongJi.tableList[z].slice(1)
							newArr.push(sumItem)
						}
						this.buMenWuZiLingYongTongJi.sumList = this.sumArray(newArr)
						console.log(this.sumArray(newArr), 'newArrnewArr')
						console.log(this.buMenWuZiLingYongTongJi, 'this.buMenWuZiLingYongTongJi.name.length -1')
					}
				}).finally(() => {
					uni.hideLoading()
				})

			},
			getNumber(newArr) {
				let moreValue = []
				if (newArr.length > 0) {
					moreValue = newArr.filter((item) => {
						return Number(item.value) === 0;
					});
				}
				return moreValue.length
			},

		},
		onPageScroll(e) {
			console.log(e, 'e')
		}
	}
</script>

<style lang="scss" scoped>
	.safe-wapper {
		width: 100vw;
		min-height: 100vh;


		.top-fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			z-index: 11;
			background: #3E8EF0;
		}


		/deep/ .u-navbar--fixed {
			background: #3E8EF0;
		}

		.bg {
			background: #F5F7F9;
		}

		.h10 {
			height: 10rpx;
		}

		.top-bg {
			background: #3E8EF0;
		}

		.top-border {
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			position: relative;
			height: 20rpx;
			// margin-top: -4rpx;
		}

		.tablist {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 94rpx;

			.tab {
				margin: 0 40rpx;
				padding: 23rpx 0;
				color: #95BCEB;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				text-align: center;
				line-height: 48rpx;
				position: relative;

				/deep/.u-icon--right {
					position: absolute;
					width: 100%;
					display: flex;
					bottom: -4rpx;
					justify-content: center;
				}
			}

			.active {
				color: #fff;
			}
		}

		.filter-con {
			height: 126rpx;
			background: #FFFFFF;
			// border-radius: 50rpx 50rpx 0 0;
			position: relative;
			// margin-top: -8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 6rpx solid #F5F7F9;

			.calendar {
				height: 56rpx;
				margin: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.arrow {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.columns {
				width: 170rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 1rpx solid #C0C4CC;
				margin: 0 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #909399;
			}
		}

		.chart-content {
			background: #FFFFFF;
		}

		.chart-con-three {
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.hx-data {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-bottom: 20rpx;


			.item {
				width: 220rpx;
				height: 140rpx;
				background: #F2F6FC;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				margin: 7rpx;

				.number {
					width: 100%;
					font-size: 40rpx;
					color: #323232;
					font-weight: bold;
					text-align: center;
					line-height: 52rpx;
				}

				.name {
					font-size: 20rpx;
					font-weight: 400;
					color: #909399;
					line-height: 28rpx;
				}
			}
		}

		.chart-con {
			background: #fff;
			min-height: calc(100vh - 300rpx);
			overflow: hidden;

			.chart-tit {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #323232;
				padding: 30rpx 30rpx 10rpx 30rpx;
			}

			.h20 {
				height: 20rpx;
				background: #F5f7f9;
			}

			.two-head {
				width: 688rpx;
				height: 140rpx;
				background: #F2F6FC;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;


				.head-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #323232;
				}

				.head-right {
					display: flex;

					.item {
						width: 68rpx;
						height: 94rpx;
						background: #D8DBE3;
						border-radius: 10rpx;
						margin-left: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 40rpx;
						color: #0F243C;
						font-weight: bold;
					}
				}
			}

			.tables {
				margin: 20rpx 30rpx 0 30rpx;

				scroll-view {
					width: 100%;
					max-height: 600rpx;
				}

				$title-width: 200rpx;
				$content-width: 250rpx;
				$border-color:#F5F7FA;
				$border: 1rpx solid $border-color;
				$white: #FFFFFF;
				$title-color: #F5F7FA;

				.table {
					display: table;

					.table-header {
						// font-weight: bold;
						background-color: $title-color;
						position: sticky;
						top: 0;
						z-index: 2;
						color: #8C99A7;

						.title-cell {
							// background-image: linear-gradient(to top right, transparent 48%, $border-color, transparent 52%);
							// border: $border;
							position: relative;
							position: sticky;
							left: 0;
							z-index: 1;
							background: #F5F7FA;

						}
					}

					.table-content {
						&__item {
							display: table-row;
							color: #303133;
							background: #fff;

							.title-cell {
								position: sticky;
								left: 0;
								z-index: 1;
								color: #8C99A7;
								background: #fff;


							}

							&:nth-child(2n) {
								background: #F5F7FA;

								.title-cell {
									background: #F5F7FA;
								}
							}

						}
					}

					.title-cell {
						display: table-cell;
						width: $title-width;
						// background-color: $title-color;
					}

					.content-cell {
						display: table-cell;
						width: $content-width;
					}

					.content-cell-big {
						width: 490rpx;
					}

					.cell {
						padding: 10rpx;
						line-height: 1.6;
					}

				}

			}
		}
	}
</style>
